<template>
  <!-- 隐患处理 待整改-->
  <view class="pwd-retrieve-container">
    <hidden-danger-info :detail="detail" />
    <view v-show="!rejectStatus">
      <review-info :detail="detail" />
    </view>
    <accept-fail-info :detail="detail" />
    <uni-forms
      v-if="!rejectStatus"
      ref="form"
      :model-value="reviewInfo"
      :rules="rules"
      labelWidth="70vw"
      labelPosition="top"
    >
      <view class="hidden-title">整改信息</view>
      <view class="background-white">
        <uni-forms-item name="dealContent" label="整改内容" required>
          <textarea
            v-model="reviewInfo.dealContent"
            class="text-area"
            placeholder-class="placeholder__style"
            placeholder="请根据实际情况简要说明整改内容(限50字)"
            maxlength="50"
          />
        </uni-forms-item>
      </view>
      <view class="background-white bor-top">
        <uni-forms-item name="dealRemark" label="备注">
          <textarea
            v-model="reviewInfo.dealRemark"
            class="text-area"
            placeholder-class="placeholder__style"
            placeholder="输入备注信息(限50字)"
            maxlength="50"
          />
        </uni-forms-item>
      </view>
      <view class="background-white bor-top bottom">
        <uni-forms-item name="managerPhotoUrl" label="上传照片（最多3张）" labelWidth="150" required>
          <image-upload state="edit" :imageUrl="reviewInfo.managerPhotoUrl" @change="imageOnChange"> </image-upload>
        </uni-forms-item>
      </view>
    </uni-forms>

    <uni-forms
      v-show="rejectStatus"
      ref="reasonForm"
      :model-value="reasonInfo"
      :rules="reasonRules"
      labelWidth="70vw"
      labelPosition="top"
    >
      <view class="hidden-title">退回说明</view>
      <view class="background-white">
        <uni-forms-item name="returnReason" label="退回原因" required>
          <textarea
            v-model="reasonInfo.returnReason"
            class="text-area"
            placeholder-class="placeholder__style"
            placeholder="请根据实际情况简要说明退回内容(限50字)"
            maxlength="50"
          />
        </uni-forms-item>
      </view>
    </uni-forms>

    <view v-if="!rejectStatus" class="submit-group bor-top">
      <button @click="submit" class="u-button block" :ripple="true">保存</button>
      <button
        v-if="detail.managerSource === managerSourceEnum.ONTHEGO"
        @click="changeRejectStatus"
        class="u-button u-button-danger block"
        :ripple="true"
      >
        退回
      </button>
    </view>

    <view v-if="rejectStatus" class="submit-group bor-top">
      <button @click="submitReturn" class="u-button u-button-danger block" :ripple="true">退回</button>
      <button @click="changeRejectStatus" class="u-button u-button-default block" type="primary" :ripple="true">
        取消
      </button>
    </view>

    <dept-selector ref="deptSelectorRef" @change="onDeptSelectorChange"></dept-selector>
    <user-selector ref="userSelectorRef" :dept-id="reviewInfo.acceptanceDeptId" @change="onUserSelectorChange">
    </user-selector>
  </view>
</template>

<script>
import { getHiddenDangerDetail } from '@/api/dbd/hiddenDangerBook'
import { hiddenDangerRectify, returnHiddenDanger } from '@/api/dbd/hiddenDangerDeal'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import HiddenDangerInfo from './components/HiddenDangerInfo'
import ReviewInfo from './components/ReviewInfo.vue'
import AcceptFailInfo from './components/AcceptFailInfo.vue'
import UserSelector from '@/components/user-selector/index.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import ImageUpload from '@/components/image-upload/index.vue'
import { managerSourceEnum } from '@/utils/constant.js'
import dayjs from 'dayjs'

export default {
  components: {
    HiddenDangerInfo,
    ReviewInfo,
    AcceptFailInfo,
    CuCellGroup,
    CuCell,
    DeptSelector,
    UserSelector,
    ImageUpload
  },
  data() {
    return {
      managerSourceEnum,
      managerId: '',
      rejectStatus: false,
      detail: {},
      now: Date.now(),
      area: '',
      reviewInfo: {
        acceptanceDeptId: '',
        acceptanceDeptName: '',
        acceptancePersonId: '',
        acceptancePersonName: '',
        dealContent: '',
        dealRemark: '',
        managerPhotoUrl: ''
      },
      reasonInfo: {
        returnReason: ''
      },
      reasonRules: {
        returnReason: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        }
      },
      rules: {
        dealContent: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        managerPhotoUrl: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        }
      }
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
    this.$refs.reasonForm.setRules(this.reasonRules)
  },
  onLoad({ managerId }) {
    this.managerId = managerId
    this.getDetail(managerId)
  },
  methods: {
    getDetail(managerId) {
      getHiddenDangerDetail(managerId).then((res) => {
        this.detail = res.data
        this.status = res.data.managerStatus

        const { dealDelayRollbackReason, planDealTime, dealDelayTime } = res.data
        // dealDelayTime空, 则没有申请过
        if (!dealDelayTime) return

        let msg = ''
        if (dealDelayRollbackReason) {
          msg = `延期申请被退回\r\n退回意见：${dealDelayRollbackReason}`
        } else {
          msg = `延期申请通过\n\r新整改节点：${dayjs(planDealTime).format('YYYY-MM-DD HH:mm')}`
        }
        uni.showModal({
          title: '',
          content: msg,
          showCancel: false,
          confirmText: '确定',
          success: (data) => {}
        })
      })
    },
    // 延期申请
    delayApply() {
      uni.navigateTo({
        url: `/pages/work/hiddenDangerDeal/delay?managerId=${this.managerId}&status=${this.status}`
      })
    },
    submit() {
      const eventChannel = this.getOpenerEventChannel()
      this.$refs.form.validate().then((res) => {
        hiddenDangerRectify({
          ...this.reviewInfo,
          managerId: this.detail.managerId
        }).then(() => {
          this.$modal.msgSuccess('保存成功')
          eventChannel.emit('reloadEvent', true)
          uni.navigateBack({
            delta: 1
          })
        })
      })
    },
    /**
     * 部门点击事件
     */
    handleDeptClick() {
      this.$refs.deptSelectorRef.open()
    },
    /**
     * 部门选择事件
     */
    onDeptSelectorChange({ name, value }) {
      this.reviewInfo.acceptanceDeptId = value
      this.reviewInfo.acceptanceDeptName = name
    },
    /**
     * 人员点击事件
     */
    handlePersonClick() {
      if (this.reviewInfo.acceptanceDeptId === '') {
        return
      }
      this.$refs.userSelectorRef.open()
    },
    /**
     * 人员选择事件
     */
    onUserSelectorChange({ name, value }) {
      this.reviewInfo.acceptancePersonId = value
      this.reviewInfo.acceptancePersonName = name
    },
    /**
     * 图片上传成功
     */
    imageOnChange(urlList) {
      this.reviewInfo.managerPhotoUrl = urlList.join(',')
    },
    changeRejectStatus() {
      this.rejectStatus = !this.rejectStatus
    },
    submitReturn() {
      this.$refs.reasonForm.validate().then((res) => {
        let data = {
          managerId: this.detail.managerId,
          returnReason: this.reasonInfo.returnReason
        }
        returnHiddenDanger(data).then(() => {
          this.$modal.msgSuccess('退回成功')
          uni.navigateBack({
            delta: 1
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pwd-retrieve-container {
  padding-bottom: 200rpx;

  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}
</style>
